<template>
  <div>
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="9">
          <el-input v-model="searchKey" placeholder="请输入你要查找的内容" style="width:200px;margin-left:10px;margin-right:10px;" />
          <el-button type="primary" @click="handleFilter">过滤</el-button>
        </el-col>

        <el-col :span="5" justify="space-between">
          <el-button type="primary" @click="handleAdd">添加</el-button>
          <el-button type="primary" @click="handleReflesh">刷新</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="productList">
      <el-table-column label="Id" prop="id" />
      <el-table-column label="商品名称" prop="productName" />
      <el-table-column label="价格" prop="price" />
      <el-table-column align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit">编辑</el-button>
          <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [],
      searchKey: ''
    }
  },
  created: function() {
    this.productList = this.fetchList()
  },
  methods: {
    fetchList: function() {
      return [
        {
          id: 1,
          productName: 'Iphone 7',
          price: 5889
        },
        {
          id: 2,
          productName: 'Iphone 8 Plus',
          price: 7889
        },
        {
          id: 3,
          productName: 'Iphone 11 Pro',
          price: 9899
        },
        {
          id: 4,
          productName: '三星 Note20 Ultra',
          price: 8999
        }
      ]
    },
    handleFilter: function() {
      console.log(this.searchKey)
      var originList = this.fetchList()
      var list = originList.filter(item => item.productName.indexOf(this.searchKey) >= 0)
      this.productList = list
    },
    handleAdd: function() {

    },
    handleReflesh: function() {

    },
    handleEdit: function() {

    },
    handleDel: function(index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      console.log(index)
    }
  }
}
</script>
